<template>
    <div class="songRank">
        <div class="rankTitle clearfix">
            <div class="rankTitlePic"><img :src="this.playlist.coverImgUrl" alt=""></div>
            <div class="right_dec">
                <p class="rankTitle_name">{{this.playlist.name}} <span>{{this.songRank.length}}首歌</span></p>
                <p class="updateTime">更新时间：{{formatDate(this.playlist.updateTime)}}</p>
            </div>
            <div class="chooseRank">
                <div class="chrankBtn" @click="rankShow()">查看更多榜单<i class="iconshow iconfont" :class="{'icon-jiankuohaoxixia':!allRankshow,'icon-jiankuohao-xi-shang':allRankshow}"></i></div>
            </div>
            <!--<div class="hot_black">-->
                <!--<div class="hot_logo"></div>-->
                <!--<p class="updateTime">更新时间：{{formatDate(this.playlist.updateTime)}}</p>-->
            <!--</div>-->
        </div>
        <div class="allRank clearfix" v-show="allRankshow">
            <div v-for="(r,i) in rankId" :key="i" @click="getList(i)">
                {{r}}
            </div>
        </div>
        <ul class="rankUl">
            <li class="rankLi" v-for="(item,index) in songRank" :key="index" v-if="index < indexNum" @click="toPlayer(item.id,songRank,index)">
                <div class="song_index" :class="{indexRed:actred[index]}">{{formatIndex(index+1)}}</div>
                <div class="songs">
                    <div class="song_name">{{item.name}}</div>
                    <div class="song_dec" >
                        <a v-for="(a,i) in item.ar" :key="i" @click="toSinger(a.id)">{{a.name}} </a>
                        -
                        <a>{{item.al.name}}</a>
                    </div>
                    <div class="song_playBtn">
                        <i class="iconfont icon-bofang"></i>
                    </div>
                </div>

            </li>
        </ul>
        <div class="fullRank" @click="fullRank()">
            <span>查看完整榜单 <i class="iconfont icon-arrow-right"></i></span>
        </div>
    </div>
</template>

<script>
    /* eslint-disable */
    import $ from 'jquery';
    export default {
        name: "song-rank",
        data(){
            return{
                rankId:{
                    "0": "云音乐新歌榜",
                    "1": "云音乐热歌榜",
                    "2": "网易原创歌曲榜",
                    "3": "云音乐飙升榜",
                    "4": "云音乐电音榜",
                    "5": "UK排行榜周榜",
                    "6": "美国Billboard周榜",
                    "7": "KTV嗨榜",
                    "8": "iTunes榜",
                    "9": "Hit FM Top榜",
                    "10": "日本Oricon周榜",
                    "11": "韩国Melon排行榜周榜",
                    "12": "韩国Mnet排行榜周榜",
                    "13": "韩国Melon原声周榜",
                    "14": "中国TOP排行榜(港台榜)",
                    "15": "中国TOP排行榜(内地榜)",
                    "16": "香港电台中文歌曲龙虎榜",
                    "17": "华语金曲榜",
                    "18": "中国嘻哈榜",
                    "19": "法国 NRJ EuroHot 30周榜",
                    "20": "台湾Hito排行榜",
                    "21": "Beatport全球电子舞曲榜",
                    "22": "云音乐ACG音乐榜",
                    "23": "云音乐嘻哈榜"
                },
                songRank:[],
                playlist:{},
                actred:["true","true","true"],
                indexNum:20,
                allRankshow: true,
                ranksid:0
            };
        },
        mounted(){
            this.ranksid = this.$store.state.ranksid;
            if(this.ranksid !== 0){
                this.getList(this.ranksid);
            }else{
                this.getList();
            }

        },
        methods:{
            // ES6写法 rankId = 0  如果rankId形参没有值的话就是默认值为0  如果形参有值就用形参的值
            // 形参=xx    表示默认值
            getList(rankId=0){
                // 先存起this指向
                let self = this;
                this.allRankshow = !this.allRankshow;
                this.$store.commit("changeRank",{rankid:rankId});
                // 发起请求
                this.axios.get("top/list?timestamp=222",{
                    params:{
                        idx:rankId
                    }
                }).then(
                    function (res) {
                        self.songRank = res.data.playlist.tracks;
                        self.playlist = res.data.playlist;
                        console.log("songRank",self.songRank);
                    });
            },
            // 时间格式化
            formatDate(time){
                // 格式化时间
                var d = new Date(time);
                var year = d.getFullYear();
                var month = d.getMonth()+1;
                var day = d.getDate();
                return year + "年" + month + "月" + day + "日";
            },
            formatTime(time){
                var d = new Date(time);
                var sec = d.getSeconds();
                var min = d.getMinutes();
                if(sec < 10){
                    sec = "0" + sec;
                }
                if(min < 10){
                    min = "0" + min;
                }
                return min + ":" + sec;
            },
            //跳转
            toSinger(singerId){
                // 跳转到singer页面
                // 第一种： path跳转， 带参数使用的是query
                this.$router.push({ path : "/singer" , query:{singerid : singerId} })

                // 第二种： 通过name来跳转
                // this.$router.push( { name:"singer" , params:{singerid : singerId} } )

                // name 命令路由方式跳转到动态路由时，会出现无法重定向的问题，所以还是要使用路径的形式
                // this.$router.push("/singer/"+singerId);

                // 推荐还是用 path跳转（不需要动态路由） 或者  拼接动态路由的参数到path（动态路由）
            },
            // 播放音乐
            play(songId){
                // 点击歌曲的方法
                // 给vuex传递数据从而更改状态
                this.$store.commit("change",{
                    playState : true,
                    id:songId
                });
                console.log(this.$parent);
                // this.$parent === App.vue
                // this.$parent.$refs === player.vue
                // 相当于触发player组件的getSong方法
                this.$parent.$refs.player.getSong()

            },
            // 序号格式化
            formatIndex(index){
                if(index < 10){
                    return "0" + index;
                }else{
                    return index;
                }
            },
            // 展开完整歌曲列表
            fullRank(){
                $(".fullRank").empty();
                return this.indexNum = this.songRank.length;
            },
            rankShow(){
                this.allRankshow = !this.allRankshow;
            }
        }
    }

</script>

<style scoped lang="scss">
    .songRank{
        width: 100%;
        .rankTitle{
            position: relative;
            /*margin-top: 9vw;*/
            padding-top: 9vw;
            /*overflow: hidden;*/
            width: 100%;
            /*background: url("../static/hot_music_bg_2x.jpg") no-repeat;*/
            /*background-size: contain;*/
            .hot_black{
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.2);
                position: absolute;
                top: 0;
                left: 0;
                .hot_logo{
                    position: absolute;
                    top: 25px;
                    left: 20px;
                    width: 142px;
                    height: 67px;
                    /*background: url("../static/index_icon_2x.png") no-repeat -24px -30px;*/
                    background-size: 166px 97px;
                }
                .updateTime{
                    color: hsla(0,0%,100%,.8);
                    font-size: 12px;
                    text-align: left;
                    position: absolute;
                    left: 20px;
                    bottom: 25px;
                    transform: scale(.91);
                    transform-origin: left top;
                }
            }

            .rankTitlePic{
                width: 40%;
                text-align: left;
                float: left;
                img{
                    width: 100%;
                }
            }
            .right_dec{
                width: 55%;
                float: left;
                text-align: left;
                margin: 6vw 0 0 3vw;
                .rankTitle_name{
                    padding-top: 1vw;
                    font-size: 18px;
                    font-weight: 600;
                    span{
                        display: block;
                        font-size: 12px;
                        transform: scale(.91);
                        transform-origin: left top;
                        padding-top: 3vw;
                    }
                }
                .updateTime{
                    font-size: 12px;
                    padding-top: 1vw;
                }
            }
            .chooseRank{
                position: absolute;
                bottom: 3vw;
                right: 2vw;
                font-size: 14px;
                .iconshow{
                    display: inline-block;
                    padding: 0 1vw;
                    vertical-align: sub;
                }
            }
        }
        .allRank{
            width: 100%;
            div{
                color: #080808;
                float: left;
                text-align: center;
                width: 50%;
                height: 50px;
                line-height: 50px;
                background-color: #fff;
                cursor: pointer;
                z-index: 10;
            }
        }
        .rankUl{
            padding-top: 10px;
            background-color: #fcfcfd;
            .rankLi{
                position: relative;
                text-align: left;
                div{
                    text-align: left;
                    display: inline-block;
                    font-size: 17px;
                }
                .song_index{
                    text-align: center;
                    vertical-align: middle;
                    width: 10%;
                    color: #999;
                    line-height: 34px;
                    transform: translateY(-20px);
                }
                .indexRed{
                    color: #df3436;
                }
                .songs{
                    width: 88%;
                    border-bottom: 1px solid #e7e7e7;
                    .song_name{
                        width: 80%;
                        color: #000;
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-break: normal;
                    }
                    .song_dec{
                        display: block;
                        width: 80%;
                        font-size: 12px;
                        color: #888;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-break: normal;
                        padding: 3px 0;
                    }
                    .song_playBtn{
                        color: #888;
                        position: absolute;
                        top: 1vw;
                        right: 5vw;
                        i{
                            font-size: 26px;
                        }
                    }
                }

            }
        }
        .fullRank{
            height: 55px;
            line-height: 55px;
            text-align: center;
            span{
                display: inline-block;
                color: #999;

            }
        }
    }
</style>